<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style/reset.css">
    <link rel="stylesheet" href="style/main.css">
</head>

<body>
    <div class="headerBar">
        <div class="topBar">
            <div class="commonWidth">
                <div class="leftArea">
                    <a href="#" class="collection">收藏幕课</a>
                </div>
                <div class="rightArea">
                    欢迎来到慕课网！
                    <a href="">[登录]</a>
                    <a href="">[免费注册]</a>
                </div>
            </div>
        </div>

        <div class="logoBar clearfix">
            <div class="commonWidth">
                <div class="logo fl">
                    <a href="#">
                        <img src="images/logo.png" alt="慕课网">
                    </a>
                </div>
                <div class="search_box fl">
                    <input type="text" class="search_text fl">
                    <input type="button" value="搜 索" class="search_button fr">
                </div>
                <div class="shopCar fr">
                    <span class="shopText fl">购物车</span>
                    <span class="shopNum fl">0</span>
                </div>
            </div>
        </div>

        <div class="navBox">
            <div class="commonWidth">
                <div class="shopClass fl">
                    <h3>全部商品分类
                        <i></i>
                    </h3>
                    <!-- 暂缺列表-->
                    <div class="shopClass_show">
                        <dl class="shopClass_item">
                            <dt>
                                <a href="#" class="b">手机</a>
                                <a href="#" class="b">数码</a>
                                <a href="#" class="aLink">合约机</a>
                            </dt>
                            <dd>
                                <a href="#">荣耀3X</a>
                                <a href="#">单反</a>
                                <a href="">智能设备</a>
                            </dd>
                        </dl>
                        <dl class="shopClass_item">
                            <dt>
                                <a href="#" class="b">手机</a>
                                <a href="#" class="b">数码</a>
                                <a href="#" class="aLink">合约机</a>
                            </dt>
                            <dd>
                                <a href="#">荣耀3X</a>
                                <a href="#">单反</a>
                                <a href="">智能设备</a>
                            </dd>
                        </dl>
                        <dl class="shopClass_item">
                            <dt>
                                <a href="#" class="b">手机</a>
                                <a href="#" class="b">数码</a>
                                <a href="#" class="aLink">合约机</a>
                            </dt>
                            <dd>
                                <a href="#">荣耀3X</a>
                                <a href="#">单反</a>
                                <a href="">智能设备</a>
                            </dd>
                        </dl>
                        <dl class="shopClass_item">
                            <dt>
                                <a href="#" class="b">手机</a>
                                <a href="#" class="b">数码</a>
                                <a href="#" class="aLink">合约机</a>
                            </dt>
                            <dd>
                                <a href="#">荣耀3X</a>
                                <a href="#">单反</a>
                                <a href="">智能设备</a>
                            </dd>
                        </dl>
                        <dl class="shopClass_item">
                            <dt>
                                <a href="#" class="b">手机</a>
                                <a href="#" class="b">数码</a>
                                <a href="#" class="aLink">合约机</a>
                            </dt>
                            <dd>
                                <a href="#">荣耀3X</a>
                                <a href="#">单反</a>
                                <a href="">智能设备</a>
                            </dd>
                        </dl>
                    </div>
                </div>
                <ul class="nav fl">
                    <li>
                        <a href="" class="active">数码城</a>
                    </li>
                    <li>
                        <a href="">天黑黑</a>
                    </li>
                    <li>
                        <a href="">团购</a>
                    </li>
                    <li>
                        <a href="">发现</a>
                    </li>
                    <li>
                        <a href="">二手特卖</a>
                    </li>
                    <li>
                        <a href="">名品会</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="banner commonWidth clearfix">
        <div class="banner_bar banner_big">
            <ul class="imgBox">
                <li>
                    <a href="">
                        <img src="images/banner/banner_01.png" alt="banner">
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/banner/banner_02.png" alt="banner">
                    </a>
                </li>
            </ul>
            <div class="imgNum">
                <a href="#" class="active"></a>
                <a href="#"></a>
            </div>
        </div>
    </div>
    <div class="shopTitle commonWidth">
        <span class="icon"></span>
        <h3>家用电脑</h3>
        <a href="#" class="more">更多&gt;&gt;</a>
    </div>
    <div class="shopList commonWidth clearfix">
        <div class="leftArea">
            <div class="banner_bar banner_sm">
                <ul class="imgBox">
                    <li>
                        <a href="">
                            <img src="images/banner/banner_sm_01.png" alt="banner">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/banner/banner_sm_02.png" alt="banner">
                        </a>
                    </li>
                </ul>
                <div class="imgNum">
                    <a href="#" class="active"></a>
                    <a href="#"></a>
                </div>
            </div>
        </div>
        <div class="rightArea">
            <div class="shopList_top clearfix">
                <div class="shop_item">
                    <div class="shop_image">
                        <a href="#">
                            <img src="images/HTC.png" alt="">
                        </a>
                    </div>
                    <h3>HTC新渴望8系列</h3>
                    <p>1899元</p>
                </div>
                <div class="shop_item">
                    <div class="shop_image">
                        <a href="#">
                            <img src="images/HTC.png" alt="">
                        </a>
                    </div>
                    <h3>HTC新渴望8系列</h3>
                    <p>1899元</p>
                </div>
                <div class="shop_item">
                    <div class="shop_image">
                        <a href="#">
                            <img src="images/HTC.png" alt="">
                        </a>
                    </div>
                    <h3>HTC新渴望8系列</h3>
                    <p>1899元</p>
                </div>
                <div class="shop_item">
                    <div class="shop_image">
                        <a href="#">
                            <img src="images/HTC.png" alt="">
                        </a>
                    </div>
                    <h3>HTC新渴望8系列</h3>
                    <p>1899元</p>
                </div>
            </div>
            <div class="shopList_small clearfix">
                <div class="shopItem_small">
                    <div class="shopItem_smImg">
                        <a href="#">
                            <img src="images/HTC.png" alt="">
                        </a>
                    </div>
                    <div class="shopItem_text">
                        <p>NFC技术一碰轻松配对!接触屏幕</p>
                        <h3>$149.00</h3>
                    </div>
                </div>
                <div class="shopItem_small">
                    <div class="shopItem_smImg">
                        <a href="#">
                            <img src="images/HTC.png" alt="">
                        </a>
                    </div>
                    <div class="shopItem_text">
                        <p>NFC技术一碰轻松配对!接触屏幕</p>
                        <h3>$149.00</h3>
                    </div>
                </div>
                <div class="shopItem_small">
                    <div class="shopItem_smImg">
                        <a href="#">
                            <img src="images/HTC.png" alt="">
                        </a>
                    </div>
                    <div class="shopItem_text">
                        <p>NFC技术一碰轻松配对!接触屏幕</p>
                        <h3>$149.00</h3>
                    </div>
                </div>
                <div class="shopItem_small">
                    <div class="shopItem_smImg">
                        <a href="#">
                            <img src="images/HTC.png" alt="">
                        </a>
                    </div>
                    <div class="shopItem_text">
                        <p>NFC技术一碰轻松配对!接触屏幕</p>
                        <h3>$149.00</h3>
                    </div>
                </div>


            </div>
        </div>
    </div>
    </div>
    <div class="shopTitle commonWidth">
        <span class="icon"></span>
        <h3>家用电脑</h3>
        <a href="#" class="more">更多&gt;&gt;</a>
    </div>
    <div class="shopList commonWidth clearfix">
        <div class="leftArea">
            <div class="banner_bar banner_sm">
                <ul class="imgBox">
                    <li>
                        <a href="">
                            <img src="images/banner/banner_sm_01.png" alt="banner">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="images/banner/banner_sm_02.png" alt="banner">
                        </a>
                    </li>
                </ul>
                <div class="imgNum">
                    <a href="#" class="active"></a>
                    <a href="#"></a>
                </div>
            </div>
        </div>
        <div class="rightArea">
            <div class="shopList_top clearfix">
                <div class="shop_item">
                    <div class="shop_image">
                        <a href="#">
                            <img src="images/HTC.png" alt="">
                        </a>
                    </div>
                    <h3>HTC新渴望8系列</h3>
                    <p>1899元</p>
                </div>
                <div class="shop_item">
                    <div class="shop_image">
                        <a href="#">
                            <img src="images/HTC.png" alt="">
                        </a>
                    </div>
                    <h3>HTC新渴望8系列</h3>
                    <p>1899元</p>
                </div>
                <div class="shop_item">
                    <div class="shop_image">
                        <a href="#">
                            <img src="images/HTC.png" alt="">
                        </a>
                    </div>
                    <h3>HTC新渴望8系列</h3>
                    <p>1899元</p>
                </div>
                <div class="shop_item">
                    <div class="shop_image">
                        <a href="#">
                            <img src="images/HTC.png" alt="">
                        </a>
                    </div>
                    <h3>HTC新渴望8系列</h3>
                    <p>1899元</p>
                </div>
            </div>
            <div class="shopList_small clearfix">
                <div class="shopItem_small">
                    <div class="shopItem_smImg">
                        <a href="#">
                            <img src="images/HTC.png" alt="">
                        </a>
                    </div>
                    <div class="shopItem_text">
                        <p>NFC技术一碰轻松配对!接触屏幕</p>
                        <h3>$149.00</h3>
                    </div>
                </div>
                <div class="shopItem_small">
                    <div class="shopItem_smImg">
                        <a href="#">
                            <img src="images/HTC.png" alt="">
                        </a>
                    </div>
                    <div class="shopItem_text">
                        <p>NFC技术一碰轻松配对!接触屏幕</p>
                        <h3>$149.00</h3>
                    </div>
                </div>
                <div class="shopItem_small">
                    <div class="shopItem_smImg">
                        <a href="#">
                            <img src="images/HTC.png" alt="">
                        </a>
                    </div>
                    <div class="shopItem_text">
                        <p>NFC技术一碰轻松配对!接触屏幕</p>
                        <h3>$149.00</h3>
                    </div>
                </div>
                <div class="shopItem_small">
                    <div class="shopItem_smImg">
                        <a href="#">
                            <img src="images/HTC.png" alt="">
                        </a>
                    </div>
                    <div class="shopItem_text">
                        <p>NFC技术一碰轻松配对!接触屏幕</p>
                        <h3>$149.00</h3>
                    </div>
                </div>


            </div>
        </div>
    </div>
    </div>
    <div class="hr_25"></div>
    <div class="footer">
        <p>
            <a href="#">慕课简介</a>
            <i>|</i>
            <a href="#">慕课公告</a>
            <i>|</i>
            <a href="#">招纳贤士</a>
            <i>|</i>
            <a href="#">联系我们</a>
            <i>|</i>
            <a href="#">客服热线：400-675-1234</a>
        </p>
        <p>Copyright&nbsp;©&nbsp;2006&nbsp;-&nbsp;2014&nbsp;慕课版权所有&nbsp;京ICP备09037834号&nbsp;京ICP证B1034-8373号&nbsp;某市公安局XX分局备案编号：123456789123</p>
        <p class="web">
            <a href="">
                <img src="images/weblogo.png" alt="logo">
            </a>
            <a href="">
                <img src="images/weblogo.png" alt="logo">
            </a>
            <a href="">
                <img src="images/weblogo.png" alt="logo">
            </a>
            <a href="">
                <img src="images/weblogo.png" alt="logo">
            </a>
        </p>
    </div>
</body>

</html>